<template>
  <el-dialog
    :title="'编辑规则'"
    :visible.sync="ruleOpen"
    append-to-body
    width="500px"
    @update:visible="$emit('update:visible', $event)"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="规则名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入规则名称" />
      </el-form-item>
      <el-form-item label="规则编号" prop="code">
        <el-input v-model="ruleForm.code" placeholder="请输入规则编号" />
      </el-form-item>
      <el-form-item label="生效时间类型" prop="takeEffectType">
        <el-select
          v-model="ruleForm.takeEffectType"
          placeholder="请选择生效时间类型"
        >
          <el-option
            v-for="dict in dict.type.iot_rule_time_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="生效时间范围"
        prop="timeRange"
        v-if="ruleForm.takeEffectType === 'appoint'"
      >
        <div style="display: flex; align-items: center">
          <el-time-picker
            is-range
            v-model="takeEffectTimeForm"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            format="HH:mm"
            value-format="HH:mm"
            default-time="00:00"
          >
          </el-time-picker>
        </div>
      </el-form-item>
      <el-form-item
        label="生效周期"
        prop="takeEffectWeeks"
        v-if="ruleForm.takeEffectType === 'appoint'"
      >
        <el-checkbox-group v-model="ruleForm.takeEffectWeeks">
          <el-checkbox label="周一">周一</el-checkbox>
          <el-checkbox label="周二">周二</el-checkbox>
          <el-checkbox label="周三">周三</el-checkbox>
          <el-checkbox label="周四">周四</el-checkbox>
          <el-checkbox label="周五">周五</el-checkbox>
          <el-checkbox label="周六">周六</el-checkbox>
          <el-checkbox label="周日">周日</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="生效日期"
        prop="effectiveDate"
        v-if="ruleForm.takeEffectType === 'appoint'"
      >
        <el-date-picker
          v-model="effectiveDateForm"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期范围"
        />
      </el-form-item>
      <el-form-item label="触发类型" prop="triggerType">
        <el-select v-model="ruleForm.triggerType" placeholder="请选择触发类型">
          <el-option
            v-for="dict in dict.type.iot_rule_trigger_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="规则描述" prop="remark">
        <el-input
          v-model="ruleForm.remark"
          type="textarea"
          placeholder="请输入规则描述"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitRuleForm">确 定</el-button>
      <el-button @click="cancelRule">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateRule } from "@/api/system/iot/rule";

export default {
  dicts: ["iot_rule_time_type", "iot_rule_trigger_type"],
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    form: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      ruleOpen: this.visible,
      ruleForm: { ...this.form },
      takeEffectTimeForm: [],
      effectiveDateForm: [],
      rules: {
        name: [
          { required: true, message: "规则名称不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "规则编号不能为空", trigger: "blur" },
        ],
        takeEffectType: [
          { required: true, message: "请选择生效时间类型", trigger: "change" },
        ],
        triggerType: [
          { required: true, message: "请选择触发类型", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    visible(newVal) {
      this.ruleOpen = newVal;
      if (newVal) {
        this.ruleForm = {
          ...this.form,
          takeEffectWeeks: this.form.takeEffectWeeks
            ? this.form.takeEffectWeeks.split(",")
            : [],
        };
        if (this.form.takeEffectTime) {
          const [start, end] = this.form.takeEffectTime.split("至");
          this.takeEffectTimeForm = [start, end];
        } else {
          this.takeEffectTimeForm = ["00:00", "00:00"];
        }
        if (this.form.effectiveDate) {
          const [startDate, endDate] = this.form.effectiveDate.split("至");
          this.effectiveDateForm = [startDate, endDate];
        }
      }
    },
  },
  methods: {
    submitRuleForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.takeEffectTimeForm && this.takeEffectTimeForm.length === 2) {
            const startTime = this.takeEffectTimeForm[0];
            const endTime = this.takeEffectTimeForm[1];
            this.ruleForm.takeEffectTime = `${startTime}至${endTime}`;
          }
          if (this.effectiveDateForm && this.effectiveDateForm.length === 2) {
            const startDate = this.effectiveDateForm[0];
            const endDate = this.effectiveDateForm[1];
            this.ruleForm.effectiveDate = `${startDate}至${endDate}`;
          }
          if (
            this.ruleForm.takeEffectWeeks &&
            Array.isArray(this.ruleForm.takeEffectWeeks)
          ) {
            this.ruleForm.takeEffectWeeks =
              this.ruleForm.takeEffectWeeks.join(",");
          }
          updateRule(this.ruleForm).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.ruleOpen = false;
            this.$emit("update:visible", false);
            this.$emit("rule-updated", this.ruleForm);
          });
        }
      });
    },
    cancelRule() {
      this.ruleOpen = false;
      this.$emit("update:visible", false);
      this.resetRuleForm();
    },
    resetRuleForm() {
      this.ruleForm = {
        ruleId: undefined,
        name: undefined,
        code: undefined,
        takeEffectType: undefined,
        takeEffectTime: undefined,
        takeEffectWeeks: [],
        effectiveDate: [],
        triggerType: undefined,
        remark: undefined,
      };
      this.takeEffectTimeForm = [];
      this.effectiveDateForm = [];
      this.$refs["ruleForm"] && this.$refs["ruleForm"].resetFields();
    },
  },
};
</script>
